﻿@model WebExtras.JQFlot.FlotChart

<p>
  In order to draw <strong>curved line graphs</strong> you need <strong>jquery.flot.curvedlines.js</strong> i.e the
  curved line graph plugin.
</p>

<div class="well ui-well">
  <h4>Slightly modifying our series and options we get...</h4>
  <pre><code>
  FlotSeries serie = new FlotSeries
  {
    label = "Sample Curved Line Graph",
    data = graphData,
    curvedLines = new CurvedLineGraph { show = true }                 <span class="comment">// This will denote that you want a curved Line graph</span>
  };

  FlotOptions options = new FlotOptions
  {
    xaxis = new AxisOptions(),
    yaxis = new AxisOptions(),
    grid = new GridOptions { borderWidth = 1 },
    series = new SeriesOptions
    {
      curvedLines = new CurvedLineOptions { show = true }                       <span class="comment">// This actitvates the curved lines plugin</span>
    }
  };
  </code></pre>
</div>

<div class="well ui-well">
  <h4>And we have a curved graph...</h4>
  <div class="content">    
    <div id="curved-graph" class="graph">
    </div>
  </div>
  <script type="text/javascript">
    $(document).ready(function () {
      $.plot($('#curved-graph'), [@Html.Raw(Model.chartSeries[0].ToString())], @Html.Raw(Model.chartOptions.ToString()));    
    });
  </script>
</div>
